<template>
    <div class="add-container" >
        <div class="form-container" >
            <h2 style="text-align: center" > FIXTURE NOTE </h2>
                <el-form :model = "formParam" :rules = "rules" ref = "custForm" >
                    <div class="clearfix" >
                        <el-row class="header-title" justify = "end" >
                            <el-col >
                            <el-form-item label = "Date" label-width="180px" style = "float: right" >
                                <el-date-picker
v-model="formParam.fixtureDate"
value-format="YYYY-MM-DD"
type = "date"
placeholder = "Select dates"
style = "width: 250px"
    />
    </el-form-item>
    </el-col>
    </el-row>
    <el-row class="header-title" justify = "end" >
        <el-col >
        <el-form-item label = "No." label-width="180px" style = "float: right" >
            <span style="display: inline-block; width: 250px" > {{ formParam.fixtureNo }}</span>
                </el-form-item>
                </el-col>
                </el-row>
                </div>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>1 </span>
                        </template>
                        </el-checkbox>
                        </el-col>
                        <el-col :span = "4" >
                            <span style="line-height: 34px" > CHARTERER </span>
                                </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" prop = "clientName" required >
                                        {{ formParam.clientName }} <br />
              ESTABLISHED UNDER { { formParam.country } } （填写国家）NATIONAL LAW, 根据 { { formParam.country } } 国家法律成立。
<br />
              REGISTRATION NUMBER登记注册号 / 统一社会信用代码： { { formParam.registrationNumber } } <br />
              REGISTRATION ADDRESS { { formParam.registrationAddress } } <br />
              CONTACT PERSON联系人： { { formParam.contactPerson } } <br />
              CONTACT NUMBER联系电话： { { formParam.contactNumber } } <br />
E-MAIL ADDRESS： { { formParam.email } } <br />
    </el-form-item>
    </el-col>
    </el-row>

    <el-row >
    <el-col :span = "1" >
        <el-checkbox disabled checked >
            <template #default >
            <span>2 </span>
            </template>
            </el-checkbox>
            </el-col>
            <el-col :span = "4" >
                <span style="line-height: 34px" > OWNER </span>
                    </el-col>
                    <el-col :span = "19" >
                        <el-form-item label = "" prop = "carrierName" required >
                            {{ formParam.carrierName }}<br />
              ESTABLISHED UNDER HONG KONG COMPANIES ORDINANCE. <br />
    REGISTRATION NUMBER： 75520235 <br />
        REGISTRATION ADDRESS： 6 / F., Manulife Place, 348 Kwun Tong Road, Kowloon, Hong Kong <br />
            CONTACT PERSON： FANG YA <br />
                CONTACT NUMBER: 18205511001 <br />
                    E-MAIL ADDRESS： fangya @aiccshipping.com<br />
                        <!-- <el-select v-model="formParam.carrierName" filterable placeholder = "choose" >
                            <el-option :key = "item.carrierName" :label = "item.carrierName" :value = "item.carrierName"
v-for= "item in carriers" >
    </el-option>
    </el-select> -->
    </el-form-item>
    </el-col>
    </el-row>
    <el-row :gutter = "24" >
        <el-col :span = "1" >
            <el-checkbox disabled checked >
                <template #default >
                <span>3 </span>
                </template>
                </el-checkbox>
                </el-col>
                <el-col :span = "4" >
                    <span style="line-height: 34px" > VESSEL </span>
                        </el-col>
                        <el-col :span = "19" class="flex-content" >
                            <el-form-item label = "" >
                                MV { { formParam.vesselName } } & nbsp; { { formParam.voyageNo } } <br />
                                    <!-- <el-select v-model="formParam.voyageNo" style = "display: inline-block;" filterable
placeholder = "choose Voyage" @change="selectPortCode" >
    <el-option :key = "item.voyageNo" :label = "item.voyageNo" :value = "item.voyageNo"
v-for= "item in voyages" />
    </el-select> -->
              BUILT / YARD : 2023 / WUHU <br />
        DWT / DRAFT : 18776.5 / 10m <br />
            FLAG : Marshall Islands <br />
                GRT / NRT : 71663M / T / 21499M / T <br />
                    LOA : 199.9m / BREADTH: 38M / DEPTH: 46M <br />
                        OWNER’S GUARANTEE CARRYING VESSEL IS SUBJECT TO THE INTERNATIONAL SAFETY MANAGEMENT CODE(ISM) AND INTERNATIONAL
              SHIP AND PORT FACILITY SECURITY CODE(ISPS).< br />
    船东保证，所承运的船舶遵守《国际安全管理规则》（ISM）和《国际海上人命安全公约关于国际船舶和港口设施保安的规则》（ISPS）。
</el-form-item>
    </el-col>
    </el-row>
    <el-row :gutter = "24" >
        <el-col :span = "1" >
            <el-checkbox disabled checked >
                <template #default >
                <span>4 </span>
                </template>
                </el-checkbox>
                </el-col>
                <el-col :span = "4" > CARGO & READINESS <br /> 货物及货好时间 </el-col>
                    <el-col :span = "19" style = "display: flex" >
                        <el-form-item label = "" >
                            <div class="" >
                                <!--  <span > ABOUT <el-form-item prop = "units" required style = "display: inline-block;" >
                                    <el-input style = "width:180px" type = "number" v-model="formParam.units" />
                                        </el-form-item> UNITS CARS, AROUND -->
                                        
    <!-- <el-icon v-if= "formParam.units" >
        <DocumentCopy @click= "copyText()" />
            </el-icon> -->
            <el-input type = "textarea" :rows = "3" style = "width: 600px" v-model="formParam.readiness" />
                <br />

                <el-input type = "textarea" :rows = "3" style = "width: 600px" v-model="formParam.readinessCn" />

                    <!--货物量约为 { { formParam.units } } 辆车, {{ formParam.totalCbm }}立方米，货物需在 <el-date-picker value-format="YYYY-MM-DD"
v-model="formParam.readyBy" type = "date" /> （具体日期或时间点）前准备就绪。 -->
    </div>
    </el-form-item>
    </el-col>
    </el-row>
    <el-row :gutter = "24" >
        <el-col :span = "1" >
            <el-checkbox disabled checked >
                <template #default >
                <span>5 </span>
                </template>
                </el-checkbox>
                </el-col>
                <el-col :span = "4" >
                    DIMENSION SURVEY <br />
                        尺寸测量
                        </el-col>
                        <el-col :span = "19" >
                            <el-form-item label = "" >
                                <span>
                                CHARTERER SHALL GUARANTEE CONSISTENCY OF DECLARED DIMENSION AND SURVEY DIMENSION INCLUDING EXTERNAL ACCESSORIES.
                IN CASE SURVEY DIMENSION IS LAGER THAN DECLARED DIMENSION RESPECTIVELY, CHATERER SHALL PAY OCEAN FREIGHT BASED ON
                SURVERY DIMENSION UNLESS OTHERWISE APPROVED BY OWNER.ESPECIALLY FOR SURVEY DIMENSION LESS THAN DECLARED,
    CHARTERER SHALL PAY OCEAN FREIGHT BASED ON DECLARED DIMENSION RESPECTIVELY.OWNER SHALL APPOINT CARGO MEASUREMENT
SUVEYOR.SURVEY FEE SHALL BE PAID BY OWNER.< br />
    租船方应保证所声明的尺寸与测量尺寸（包括外部附件）的一致性。若测量尺寸大于声明尺寸，租船方应基于测量尺寸支付海运运费，除非船东另有批准。特别是当测量尺寸小于声明尺寸时，租船方仍应基于声明尺寸支付海运运费。船东应指定货物测量测量师，测量费用应由船东承担。"
        </span>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row >
        <el-col :span = "1" >
            <el-checkbox disabled checked >
                <template #default >
                <span>6 </span>
                </template>
                </el-checkbox>
                </el-col>
                <el-col :span = "4" > LOADING PORT <br /> 装货港 </el-col>
                    <el-col :span = "19" >
                        <el-form-item label = "" prop = "pol" required >
                            <el-input type = "textarea" v-model="formParam.pol" placeholder = "Input POL" style = "width: 400px" />
                                <!-- <el-select v-model="formParam.pol" filterable allow-create placeholder = "Choose POL" >
                                    <el-option :key = "item.fullPortName" :label = "item.fullPortName" :value = "item.fullPortName"
v-for= "item in pols" />
    </el-select> -->
    </el-form-item>
    </el-col>
    </el-row>
    <el-row >
    <el-col :span = "1" >
        <el-checkbox disabled checked >
            <template #default >
            <span>7 </span>
            </template>
            </el-checkbox>
            </el-col>
            <el-col :span = "4" > LAYCAN <br /> 船期 </el-col>
                <el-col :span = "6" >
                    <el-form-item label = "" prop = "laycan" required >
                        <el-date-picker
type = "daterange"
start-placeholder="Start Date"
end-placeholder="End Date"
format = "YYYY/MM/DD"
v-model="formParam.laycan"
@change="datePickChange"
    />
    </el-form-item>
    </el-col>
    </el-row>
    <el-row >
           <el-col :span = "1" >
            <el-checkbox disabled checked >
            <template #default >
            <span>8 </span>
            </template>
            </el-checkbox>
            </el-col>

            <el-col :span = "4" > DISCHARGING PORT <br /> 卸货港 </el-col>
                <el-col :span = "19" >
                        <el-form-item label = "" prop = "pod" required >
                               <el-input type = "textarea" v-model= "formParam.pod" style = "width: 400px" />
        </el-form-item>
        <div style = "margin: -10px 0 10px;" > 1个安全泊位{ { formParam.pod } } </div>
            </el-col>
            </el-row>

            <el-row >
            <el-col :span = "1" >
                <el-checkbox disabled checked >
                    <template #default >
                    <span>9 </span>
                    </template>
                    </el-checkbox>
                    </el-col>

                    <el-col :span = "4" > TRANSSHIPMENT <br /> 中转 </el-col>
                        <el-col :span = "19" >
                            <el-form-item label = "" >
                                   <el-input v-if= "editId == 9"             type = "textarea" rows = "3"  v-model="formParam.clause9"  style = "width: 1000px"  @blur="editNote(9)"    > </el-input>
                                <div v-else> {{ formParam.clause9 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 9" @click="editTrue(9)" />
            <Edit v-else @click="editNote(9)" />
                </el-icon>
                </span>
                </el-form-item>
                <!-- <div style = "margin: -10px 0 10px;" > 直航，不允许中转{ { formParam.pod } } </div> -->
                    </el-col>
                    </el-row>
                    <el-row >
                    <el-col :span = "1" >
                        <el-checkbox disabled checked >
                            <template #default >
                            <span>10 </span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > FREIGHT RATE <br /> 海运费费率 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" class="myitem" >
                                        <div class="myitem" >
                                            <div
                  v-for= "(item2, index2) in formParam.freightRates"
                  :key = "'item2_'+index2"
style = "display: block"
    >
    <el-form-item prop = "" required style = "display: inline-block" >
        <el-input style = "width: 180px" v-model="item2.freightRate" />
            </el-form-item>
            <!--{{ item2.brand }} -->
                <el-form-item prop = "" required style = "display: inline-block" >
                    <el-select v-model="item2.shippingTerms" filterable a style = "width: 100px" >
                        <el-option v-for= "(item, index) in shippingTermsNames" :key = "'item_'+index" :label = "item.label" :value = "item.label" />
                            </el-select>
                    ，NET
    & nbsp;
<el-button type = "text" icon = "Plus" @click="addFreightRateItem()" />
    <el-button v-if= "index2 > 0" type = "text" icon = "Delete" @click="deleteFreightRateItem(item2, index2)" />
        </el-form-item>
        <div style = "margin: 2px 0;" > 每立方{ { item2.freightRate } }，{ { shippingTermsNames.findIndex(item => item.label === item2.shippingTerms).label > -1 ? shippingTermsNames.find(item => item.label === item2.shippingTerms).value : "" } }，净价 </div>
            </div>
            </div>
            <!--span v-for= "(item2, index2) in formParam.freightRates" :key = "index2" :label = "item2" :value = "item2" >
                每立方${ { item2.freightRate } }，{ { item2.shippingTerms ? shippingTermsNames[item2.shippingTerms] : "" } }，净价 <br />
                    </span -->
                    </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row >
                    <el-col :span = "1" >
                        <el-checkbox disabled checked >
                            <template #default >
                            <span>11 </span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > FREIGHT PAYMENT <br /> 运费支付 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" prop = "paymentDay" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 11"
                  type = "textarea"
rows = "3"
v-model="formParam.clause11"
style = "width: 1000px"
@blur="editTrue(11)"
    > </el-input>
    <div v-else> {{ formParam.clause11 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 11" @click="editTrue(11)" />
            <Edit v-else @click="editNote(11)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>12 </span>
                        </template>
                        </el-checkbox>
                        </el-col>
                        <el-col :span = "4" > TAXES / DUES <br /> 税费 / 杂费 </el-col>
                            <el-col :span = "19" >
                                <el-form-item label = "" >
                                    <div class="note-content" >
                                        <el-input
v-if= "editId == 12"
                  type = "textarea"
rows = "3"
v-model="formParam.clause12"
style = "width: 1000px"
@blur="editTrue(12)"
    > </el-input>
    <div v-else> {{ formParam.clause12 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 12" @click="editTrue(12)" />
            <Edit v-else @click="editNote(12)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>

                <el-row >
                <el-col :span = "1" >
                    <el-checkbox v-model="duesechecked" >
                        <template #default >
                        <span v-if= "duesechecked" > 13 </span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > DETENTION / DEMURRAGE <br /> 滞期费 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 13"
                  type = "textarea"
rows = "3"
v-model="formParam.clause13"
style = "width: 1000px"
@blur="editTrue(13)"
    > </el-input>
    <div v-else> {{ formParam.clause13 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 13" @click="editTrue(13)" />
            <Edit v-else @click="editNote(13)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 14 : "13" }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > DEADFREIGHT <br /> 亏舱费 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 14"
                  type = "textarea"
rows = "3"
v-model="formParam.clause14"
style = "width: 1000px"
@blur="editTrue(14)"
    > </el-input>
    <div v-else> {{ formParam.clause14 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 14" @click="editTrue(14)" />
            <Edit v-else @click="editNote(14)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 15 : "14" }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > AGENCY <br /> 代理 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 15"
                  type = "textarea"
rows = "3"
v-model="formParam.clause15"
style = "width: 1000px"
@blur="editTrue(15)"
    > </el-input>
    <div v-else> {{ formParam.clause15 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 15" @click="editTrue(15)" />
            <Edit v-else @click="editNote(15)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 16 : "15" }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > BILL OF LADING <br /> 提单 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 16"
                  type = "textarea"
rows = "3"
v-model="formParam.clause16"
style = "width: 1000px"
@blur="editTrue(16)"
    > </el-input>
    <div v-else> {{ formParam.clause16 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 16" @click="editTrue(16)" />
            <Edit v-else @click="editNote(16)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 17 : "16" }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > LOADING MATERIAL <br /> 装载物资 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 17"
                  type = "textarea"
rows = "3"
v-model="formParam.clause17"
style = "width: 1000px"
@blur="editTrue(17)"
    > </el-input>
    <div v-else> {{ formParam.clause17 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 17" @click="editTrue(17)" />
            <Edit v-else @click="editNote(17)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 18 : 17 }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > LOADING AND DISCHARGING CLAUSE <br /> 装卸条款 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 18"
                  type = "textarea"
rows = "3"
v-model="formParam.clause18"
style = "width: 1000px"
@blur="editTrue(18)"
    > </el-input>
    <div v-else> {{ formParam.clause18 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 18" @click="editTrue(18)" />
            <Edit v-else @click="editNote(18)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 19 : 18 }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > LAW AND ARBITRATION <br /> 法律和仲裁 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 19"
                  type = "textarea"
rows = "3"
v-model="formParam.clause19"
style = "width: 1000px"
@blur="editTrue(19)"
    > </el-input>
    <div v-else> {{ formParam.clause19 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 19" @click="editTrue(19)" />
            <Edit v-else @click="editNote(19)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>

                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 20 : 19 }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > CONFIDENTIALITY <br /> 保密条款 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 20"
                  type = "textarea"
rows = "3"
v-model="formParam.clause20"
style = "width: 1000px"
@blur="editTrue(20)"
    > </el-input>
    <div v-else> {{ formParam.clause20 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 20" @click="editTrue(20)" />
            <Edit v-else @click="editNote(20)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 21 : 20 }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > AGREEMENT PERIOD <br /> 协议期限 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 21"
                  type = "textarea"
rows = "3"
v-model="formParam.clause21"
style = "width: 1000px"
@blur="editTrue(21)"
    > </el-input>
    <div v-else> {{ formParam.clause21 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 21" @click="editTrue(21)" />
            <Edit v-else @click="editNote(21)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 22 : 21 }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > CONFLICT CLAUSE <br /> 冲突条款 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="note-content" >
                                            <el-input
v-if= "editId == 22"
                  type = "textarea"
rows = "3"
v-model="formParam.clause22"
style = "width: 1000px"
@blur="editTrue(22)"
    > </el-input>
    <div v-else> {{ formParam.clause22 }}</div>
        <span >
        <el-icon >
        <Finished v-if= "editId == 22" @click="editTrue(22)" />
            <Edit v-else @click="editNote(22)" />
                </el-icon>
                </span>
                </div>
                </el-form-item>
                </el-col>
                </el-row>

                <el-row >
                <el-col :span = "1" >
                    <el-checkbox disabled checked >
                        <template #default >
                        <span>{{ duesechecked ? 23 : 22 }}</span>
                            </template>
                            </el-checkbox>
                            </el-col>
                            <el-col :span = "4" > OTHER CLAUSES <br /> 其他条款 </el-col>
                                <el-col :span = "19" >
                                    <el-form-item label = "" >
                                        <div class="" >
                                            <span
                                            >OTHER TERMS AND CONDITIONS AS PER GENCON 2022 CP.< br />
                                                其他条款和条件根据金康2022合同版本。
</span>
    </div>
    </el-form-item>
    </el-col>
    </el-row>

    <el-row >
    <el-col :span = "1" >
        <el-checkbox disabled checked >
            <template #default >
            <span>{{ duesechecked ? 24 : 23 }}</span>
                </template>
                </el-checkbox>
                </el-col>
                <el-col :span = "4" > LANGUAGE PRECEDENCE CLAUSE <br /> 语言优先性条款 </el-col>
                    <el-col :span = "19" >
                        <el-form-item label = "" >
                            <div class="" >
                                <span
                                >IN CASE OF CONFLICT BETWEEN CHINESE LANGUAGE AND ENGLISH LANGUAGE, ENGLISH SHALL PREVAIL. <br />
                                    如果协议中中文和英文在释义上有任何冲突， 则以英文为准。
</span>
    </div>
    </el-form-item>
    </el-col>
    </el-row>

    <el-row >
    <el-col :span = "1" >
        <el-checkbox disabled checked >
            <template #default >
            <span>{{ duesechecked ? 25 : 24 }}</span>
                </template>
                </el-checkbox>
                </el-col>
                <el-col :span = "4" > OWNER’S NOMINATED BANK ACCOUNT <br /> 船东指定银行账户 </el-col>
                    <el-col :span = "19" >
                        <div class="bank-div" style = "line-height: 40px" >
                            <div>
                            <span class="form-label" > BANK NAME: </span><el-input v-model="formParam.ownerBankName" style="width: 70%" />
                                </div>
                                <div > <span class="form-label" > SWIFT: </span><el-input v-model="formParam.ownerSwift" style="width: 70%" /> </div>
                                    <div >
                                    <span class="form-label" > BANK ADD: </span><el-input v-model="formParam.ownerBankAddress" style="width: 70%" />
                                        </div>
                                        <div >
                                        <span class="form-label" > ACCOUNT NAME: </span
                                            > <el-input v-model="formParam.ownerAccountName" style = "width: 70%" />
                                                </div>
                                                <div >
                                                <span class="form-label" > ACCOUNT NO: </span><el-input v-model="formParam.ownerAccountNo" style="width: 70%" />
                                                    </div>
                                                    </div>
                                                    </el-col>
                                                    </el-row>
                                                    <el-row style = "margin:20px 0;" >
                                                        <el-form-item label = "Remarks" >
                                                            <el-input
type = "textarea"
rows = "3"
v-model="formParam.remark"
style = "width: 1000px"
    > </el-input>
    </el-form-item>
    </el-row>
    <el-row style = "margin:20px 0;" >
        <el-form-item label = "Appendix" >
            <PreViewImageUpload :iTable = "false" :record = "formParam" :photos = "Array.isArray(formParam.appendix)?formParam.appendix:formParam.appendix?[formParam.appendix]:[]" :url = "uploadUrl" :id = "formParam?.fixtureId" @onSuccess="submitUploadForm" />
                </el-form-item>
                </el-row>
                <el-row >
                <el-col :offset = "1" :span = "22" style = "margin-bottom: 30px" > END </el-col>
                    <el-col :offset = "1" :span = "9" >
                        <p style="font-weight: bold" > CHARTERER </p>
                            <p > {{ formParam.clientName }}</p>
                                </el-col>
                                <el-col :offset = "7" :span = "6" style = "text-align: center" >
                                    <p style="font-weight: bold" > OWNER </p>
                                        <p > AICC HONGKONG LIMITED </p>
                                            </el-col>
                                            </el-row>
                                            </el-form>
                                            <div class="dialog-footer" >
                                                <el-button @click="cancelForm" > {{ $t("ship.button.cancel") }}</el-button>
                                                    <el-button type = "primary" :loading = "isLoading" @click="save" > Save </el-button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<el-button type = "primary" :loading = "isLoading" @click="submitForm" > Submit </el-button>
    </div>
    </div>
    </div>
    </template>
    <script lang = "ts" setup >
import moment from "moment";
import { ref, onMounted, reactive, computed, watch, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import service from "@/utils/request";
import { ElMessage } from "element-plus";
import PreViewImageUpload from '@/components/ImageUpload/PreViewImageUpload.vue'
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
import { ElNotification, ElMessageBox } from "element-plus";
const custForm = ref(null);
const dialogTitle = ref("");
const shippingTermsList = ref(["FLT, NET ", "FIO, NET ", "FILO, NET ", "LIFO, NET "]);

const uploadUrl = "shipping/fixtureNote/uploadAppendix";
const isTable = false;
const accept = ".xlsx,.xls";
const initForm = {
    fixtureNo: null,
    clientName: null,
    carrierCode: null,
    carrierName: null,
    vesselName: "AICC HUANGHU",
    voyageNo: null,
    clientCode: null,
    contactName: null,
    pol: null,
    pod: null,
    paymentDay: null,
    ladingDay: null,
    contactPerson: null,
    contactNumber: null,
    email: null,
    laycanStart: null,
    readiness: "",
    readinessCn: "",
    laycan: null,
    laycanEnd: null,
    terms: <any>[],
    units: null,
    cargoType: null,
    totalCbm: null,
    readyBy: "",
    status: null,
    readinessDate: null,
    shippingTerms: null,
    otherClauses: "",
    fixtureDate: moment(new Date()).format("YYYY-MM-DD"),
    signed: null,
    freightRates: <any>[],
    detentionDay: null,
    deadFreightDay: null,
    fixtureId: null,
    registrationAddress: null,
    registrationNumber: null,
    ownerBankName: null,
    ownerSwift: null,
    ownerBankAddress: null,
    ownerAccountName: null,
    ownerAccountNo: null,
    ownerIntermediaryBank: null,
    ownerIntermediarySwift: null
};

const duesechecked = ref(false);

const terms = ref([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1]);

const formParam = reactive(Object.assign({}, initForm));
const total = ref(0);
const statuss = ["To Be pproved", "Approved", "Reject"];
const initList = [{ brand: "", freightRate: "", shippingTerms: null }];
const rules = ref({});

let vessels = reactive([]);
let bankInfo = reactive({});
let voyages = reactive([]);
let pols = reactive([]);
let pods = reactive([]);
const isLoading = ref(false);

const queryParams = reactive({
    pageNum: 1,
    pageSize: 20,
    vesselName: null,
    voyageNo: null,
    templateType: 1,
    fullName: null,
    orderByColumn: undefined,
    isAsc: undefined
});

const listData = ref([]);
const refreshTable = async () => {
    let result = await service.get("/shipping/fixtureNote/getTable", { params: queryParams });
    listData.value = result.data;
    total.value = result.total;
};

// 编辑页面
const editId = ref(null);
const fixtureNoteClauseList = ref([]);
const getFixtureNoteClause = () => {
    service.get("/shipping/fixtureNoteClause?type=0").then((res: any) => { 
        if (res.data) {
            res.data.forEach((item: any) => {
                formParam["clause" + item.clauseId] = item.content;
            });
            fixtureNoteClauseList.value = res.data;
        }
    });
};
const editNote = id => {
    editId.value = id;
};
const editTrue = clauseId => {
    ElMessageBox.confirm("Confirm to Save？", "Confirmation Information", {
        type: "warning",
        confirmButtonText: "Save",
        cancelButtonText: "Cancel"
    }).then(async () => {
        editId.value = null;
        const content = formParam["clause" + clauseId];
        const id = fixtureNoteClauseList.value.find(item => item.clauseId == clauseId).id;
        service.put("/shipping/fixtureNoteClause", { content, type: 1, clauseId, id }).then(res => {
            if (res) {
                ElNotification.success({
                    title: "Prompt information",
                    message: "Edit the data success!",
                    position: "bottom-right"
                });
            }
        });
    });
};
const dialogFormVisible = ref(false);
let isAdd = false;
const recordData = ref();

watch(
    route,
    async () => {
        recordData.value = JSON.parse(localStorage.getItem("RECORD_DATA1"));
        Object.keys(recordData.value).forEach(key => {
            formParam[key] = recordData.value[key];
        });
        if (!formParam.fixtureDate) {
            formParam.fixtureDate = moment(new Date()).format("YYYY-MM-DD");
        }
        if (formParam.terms) {
            duesechecked.value = Boolean(formParam.terms[12]);
        }
        if (formParam.laycanStart) {
            formParam.laycan = [formParam.laycanStart, formParam.laycanEnd];
        }

        getFixtureNoteClause();
        let params = { vesselName: formParam.vesselName, voyageNo: formParam.voyageNo, clientCode: formParam.clientCode }; 
        if (formParam.readiness == null || formParam.readiness == "") {
            service
                .post("/shipping/fixtureNote/getAllFinishedByClient", params)
                .then((result: any) => {
                    formParam.readiness = "";
                    formParam.readinessCn = "";
                    if (result.data && result.data.readiness) {
                        let readiness = result.data.readiness;
                        for (let i in readiness) {
                            formParam.readiness +=
                                "ABOUT " +
                                readiness[i].totalUnits +
                                " UNITS OF " +
                                readiness[i].brand +
                                " , AROUND" +
                                readiness[i].totalCbm +
                                " CBM,CARGO TO BE READY BY ";
                            if (formParam.readyBy != null && formParam.readyBy != undefined) {
                                formParam.readiness += formParam.readyBy;
                            }
                            formParam.readiness += "\n";
                            formParam.readinessCn +=
                                "货物量约为" +
                                readiness[i].totalUnits +
                                "辆" +
                                readiness[i].brand +
                                ",货物需在" +
                                " " +
                                "（具体日期或时间点）前准备就绪";
                            if (formParam.readyBy != null && formParam.readyBy != undefined) {
                                formParam.readinessCn += formParam.readyBy;
                            }
                            formParam.readinessCn += "\n";
                            //formParam.units = result.data.totalUnits
                            //formParam.totalCbm=result.data.totalCbm
                        }
                    } else {
                        formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY ";
                        formParam.readinessCn = "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
                    }
                    if (formParam.freightRates == null) {
                        formParam.freightRates = result.data.freightRate;
                    } else {
                        formParam.freightRates = JSON.parse(formParam.freightRates);
                    }

                    formParam.pol = result.data.pol;
                    formParam.pod = result.data.pod;
                })
                .catch((err: any) => {
                    formParam.freightRates = initList;
                    formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY ";
                    formParam.readinessCn = "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
                    console.log(err, "err");
                });
        } else {
            formParam.freightRates = JSON.parse(formParam.freightRates);
        }
    },

    { immediate: true }
);

const save = () => {
    terms.value[12] = Number(duesechecked.value);
    formParam.terms = terms.value; 
    formParam.freightRates = JSON.stringify(formParam.freightRates);
    service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);
    ElNotification.success({
        title: "Prompt information",
        message: "save successful!",
        position: "bottom-right"
    });
};

const submitForm = () => {
    // @ts-ignore
    custForm.value.validate(async valid => {
        if (!valid) {
            ElMessage.error("Verification failed!");
            return;
        }

        ElMessageBox.confirm("Confirm to Submit ？", "Submit  Information", {
            type: "warning",
            confirmButtonText: "Confirm",
            cancelButtonText: "Cancel"
        }).then(async () => {
            terms.value[12] = Number(duesechecked.value);
            formParam.terms = terms.value;
            //formParam.freightRate = ""
            // for(let i in formParam.freightRates){
            //   formParam.freightRate += "$"+formParam.freightRates[i].freightRate +" PER CBM FOR " + formParam.freightRates[i].brand + " " + formParam.freightRates[i].shippingTerms +" ,NET"+"\n";
            // }
            formParam.status = 0;
            formParam.freightRates = JSON.stringify(formParam.freightRates);
            await service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);

            // @ts-ignore
            ElNotification.success({
                title: "Prompt information",
                message: "save successful!",
                position: "bottom-right"
            });
            dialogFormVisible.value = false;
            cancelForm();
            refreshTable();
        });
    });
};

const cancelForm = () => {
    if (formParam.type == 1) {
        router.push({ path: "/freightForward/fixtureNote/list", query: { showForm: false } });
    } else {
        router.push({ path: "/contract/fixtureNote", query: { showForm: false } });
    }
};

const datePickChange = (value: any) => {
    formParam.laycanStart = moment(value[0]).format("YYYY-MM-DD");
    formParam.laycanEnd = moment(value[1]).format("YYYY-MM-DD");
};

const addFreightRateItem = () => {
    let tt = JSON.parse(JSON.stringify(initList[0]));
    formParam.freightRates.push(tt);
};
const deleteFreightRateItem = (item, index) => {
    formParam.freightRates.splice(index, 1);
};

// 上传成功更新数据
const submitUploadForm = async data => {
    formParam.appendix = data.url;
};

let cargo_type = reactive([]);
// 获取文件名称
function getFileName(name) {
    if (name == null) {
        return name;
    }
    // 如果是url那么取最后的名字 如果不是直接返回
    if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
    } else {
        return name;
    }
}
let shippingTermsNames = [];



onMounted(async () => {
    let result = await service.get("/shipping/vessel/getSchedule");
    if (result) {
        vessels = result.data;
        voyages = (vessels.find(item => item.vesselName == "AICC HUANGHU") || { schedules: [] }).schedules;
    }
    result = await service.get("/shipping/carrier/getCarrierByCode?carrierCode=" + formParam.carrierCode);
    if (result) {
        bankInfo = result.data.bankInfo;
        formParam.ownerBankName = bankInfo.bankName;
        formParam.ownerSwift = bankInfo.swiftCode;
        formParam.ownerBankAddress = bankInfo.bankAddress;
        formParam.ownerAccountName = bankInfo.beneficiaryName;
        formParam.ownerAccountNo = bankInfo.accountNo;
        formParam.ownerIntermediarySwift = bankInfo.swiftCode;
    }

    const res = await proxy.useDict("cargo_type", "freight_rate_term");
    cargo_type = res.cargo_type;
    shippingTermsNames = res.freight_rate_term;
    console.log('[ shippingTermsNames ] >', res)
    // refreshTable()
});
</script>


<style scoped lang = "scss" >
.myitem {
    display: block!important;
}

.add-container {
    padding-top: 30px;
    background-color: #fafafa;
    min-height: 100%;
}

.form-container {
    margin: auto;
    padding: 40px;
    width: 90%;
    background-color: #fff;
}

.dialog-footer {
    margin: 60px auto 0;
    width: 100%;
    text-align: center;
}

.el-col > span {
    margin-left: 22px;
    line-height: 32px;
    font-size: 14px;
}

.flex-content.el-form-item__content {
    display: inline-block;
}

.el-checkbox {
    color: black;
}

.el-checkbox__label {
    margin-top: 2px;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}

::v-deep(.el-form-item__label) {
    font-weight: 400!important;
}

.header-title {
    width: 100%;
}

.bank-div {
  div {
        width: 100%;
    }
}

.form-label {
    display: inline-block;
    width: 28%;
    text-align: left;
}
.note-content {
    width: 100%;
    display: flex;
    justify-content: space-between;

}
::v-deep(.el-checkbox__input) {
    margin-top: -2px;
}
</style>